<script setup lang="ts">
import { ref } from "vue";
import Charts from "./charts.vue";
import { useLocalStore } from "../../../store";
import {
  exportPipeLineList, exportPipePointList,
  statisticsPipeLineLength,
  statisticsPipeLineNum,
  statisticsPipePointNum,
} from "@/api/pipe";
import fileDownload from "js-file-download";
const props = defineProps({
  statisticsCategory: Number,
});
const store = useLocalStore();
const { statisticsCondition } = storeToRefs(store);
const categoryName = ref("");

const tableData = ref([]);

const download = () => {
  const { isPointType } = statisticsCondition.value;
  const api = isPointType ? exportPipePointList : exportPipeLineList
  api({
    ...statisticsCondition.value,
    pageSize: 100000,
    pageIndex: 1,
  }).then((res: any) => {
    const { attrKey } = statisticsCondition.value;
    fileDownload(res.data, attrKey + "-统计结果.xlsx");
  });
};

const viewMore = (value: string) => {
  store.setStatisticsConditionFromChart({
    ...statisticsCondition.value,
    attrVal: value,
  });
};

watchEffect(() => {
  if (statisticsCondition.value) {
    categoryName.value = statisticsCondition.value.attrKey;
  }
});

onMounted(() => {
  if (statisticsCondition.value) {
    const { isStatisticsNum, isPointType } = statisticsCondition.value;
    let api = statisticsPipeLineLength;
    if (isStatisticsNum) {
      api = isPointType ? statisticsPipePointNum : statisticsPipeLineNum;
    }
    api({
      ...statisticsCondition.value,
      pageSize: 100000,
      pageIndex: 1,
    }).then(({ data, succeeded }: any) => {
      if (succeeded) {
        tableData.value = data.items.map((item: any) => {
          return {
            ...item,
            attrVal: item.attrVal === null ? '': item.attrVal,
            length: isStatisticsNum ? item.num : item.length.toFixed(2),
          };
        });
      }
    });
  }
});
</script>

<template>
  <div class="statisticsResult">
    <div class="header">
      {{
        statisticsCondition.isStatistcsNum
          ? "通用统计"
          : `按${categoryName}统计管长`
      }}
    </div>
    <div class="oneLevel">{{ categoryName }}</div>
    <div class="chart">
      <Charts :data="tableData" :id="new Date().getTime()" />
    </div>
    <div class="oneLevel">统计表格</div>
    <div class="table">
      <el-table :data="tableData" border :style="{height: '320px'}">
        <el-table-column :label="categoryName" width="115">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon @click="viewMore(scope.row.attrVal)"
                ><CaretLeft/></el-icon>
              <span style="margin-left: 10px">{{ scope.row.attrVal }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="length"
          :label="
            statisticsCondition.isStatisticsNum
              ? '设备数量(个)'
              : '长度求和(米)'
          "
          width="115"
        />
      </el-table>
    </div>
    <div class="footer">
      <el-button @click="store.showStatisticChart(false)">返回</el-button>
      <el-button type="primary" @click="download">导出表格</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.statisticsResult {
  position: absolute;
  top: 65px;
  right: 20px;
  z-index: 1000;
  width: 250px;
  height: 780px;
  font-family: PingFangSC-bold, sans-serif;
  color: #000;
  background-color: rgb(255 255 255 / 100%);

  .header {
    height: 40px;
    margin: 10px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #000;
    text-align: center;
    border-bottom: 1px solid rgb(187 187 187 / 30%);
  }

  .oneLevel {
    display: inline-block;
    margin: 15px 0 10px 10px;
    font-size: 16px !important;
    font-weight: bold;
  }

  .chart {
    height: 200px;
    padding: 10px;
    overflow: hidden auto;
  }

  .table {
    width: 100%;
    height: 320px;
    padding: 10px;
    overflow: hidden auto;
  }

  .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 115px;
    height: 60px;
    font-size: 14px;
    background: #e8eaf1;
  }

  .footer {
    position: absolute;
    bottom: 30px;
    width: auto;
    margin-top: 30px;
    margin-left: 30px;
  }
}
</style>
